<extend name='Public/demo' />

<block name='contents'>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Theme/assets/bootstrap-datepicker/css/datepicker.css" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Theme/assets/bootstrap-colorpicker/css/colorpicker.css" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Theme/assets/bootstrap-daterangepicker/daterangepicker.css" />

	<script src="__PUBLIC__/User/city/jquery-1.11.3.min.js"></script>
	<script src="__PUBLIC__/User/city/Popt.js"></script>
	<script src="__PUBLIC__/User/city/cityJson.js"></script>
	<script src="__PUBLIC__/User/city/citySet.js"></script>

	<style type="text/css">
		._citys { width: 450px; display: inline-block; border: 2px solid #eee; padding: 5px; position: relative; }
		._citys span { color: #56b4f8; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 10px; top: 10px; border: 1px solid #56b4f8; cursor: pointer; }
		._citys0 { width: 100%; height: 34px; display: inline-block; border-bottom: 2px solid #56b4f8; padding: 0; margin: 0; }
		._citys0 li { display: inline-block; line-height: 34px; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }
		.citySel { background-color: #56b4f8; color: #fff !important; }
		._citys1 { width: 100%; display: inline-block; padding: 10px 0; }
		._citys1 a { width: 83px; height: 35px; display: inline-block; background-color: #f5f5f5; color: #666; margin-left: 6px; margin-top: 3px; line-height: 35px; text-align: center; cursor: pointer; font-size: 13px; overflow: hidden; }
		._citys1 a:hover { color: #fff; background-color: #56b4f8; }
		.AreaS { background-color: #56b4f8 !important; color: #fff !important; }
	</style>

	<div class="row">
		<aside class="profile-nav col-lg-3">
			<section class="panel">
				<div class="user-heading round">
					<a href="{:U('User/index')}">
						<!-- <img data-src="holder.js/112x112/auto/vine" class="img-circle"> -->
						<img src="__PUBLIC__/{$res[0]['photo']}"  class="img-circle" width="110px" height="110px">
					</a>
					<h1>
						{$res[0]['nickname']}
					</h1>
					<p>{$res[0]['username']}</p>
				</div>
				<ul class="nav nav-pills nav-stacked">
				<li class="active">
					<a href="{:U('User/index')}"> <i class="icon-calendar"></i>
						个人简介
					</a>
				</li>
				<li>
					<a href="{:U('Image/index')}">
						<i class="icon-calendar"></i>
						我的相册
					</a>
				</li>
				<li>
				<a href="{:U('Friend/index')}">
					<i class="icon-edit"></i>
					我的好友
				</a>
				</li>

				</ul>
			</section>
		</aside>
		<aside class="profile-info col-lg-9">
			<section class="panel">
				<header class="panel-heading">编辑个人资料</header>
				<div class="panel-body">
					<div class="form">
						<form class="cmxform form-horizontal tasi-form" id="signupForm" method="post" action="editdo" novalidate="novalidate" enctype="multipart/form-data">

							<img class="pull-left" style="margin-right:100px;" data-src="holder.js/60x60/auto/vine" >
							<div class="form-group pull-left" >
								<label for="exampleInputFile">更改头像</label>
								<input type="file" id="exampleInputFile" name="photo">
						</div>

						<div class="clearfix"></div>
						<div class="form-group ">
							<label class="control-label col-lg-2" for="inputSuccess">性别</label>
							<div class="col-lg-3">
								<label class="checkbox-inline" style="margin-left:-20px">
									<input type="radio" id="inlineRadio1" value="1" name="sex" {$res[0]['sex']==1?'checked':''}>男</label>
								<label class="checkbox-inline">
									<input type="radio" id="inlineRadio2" value="0" name="sex" {$res[0]['sex']==0?'checked':''}>女</label>
								<label class="checkbox-inline">
									<input type="radio" id="inlineRadio2" value="2" name="sex" {$res[0]['sex']==2?'checked':''}>保密</label>
							</div>
						</div>

						<div class="form-group ">
								<label for="firstname" class="control-label col-lg-2">标签</label>
							<div class="col-lg-9">
						   		<input name="tag" id="tagsinput" class="tagsinput" value="{$res[0]['tag']}" />
							</div>
						</div>




						<div class="form-group ">
							<label for="firstname" class="control-label col-lg-2">姓名</label>
							<div class="col-lg-9">
								<input class=" form-control" id="" name="nickname" type="text" placeholder="姓名不能为空" value="{$res[0]['nickname']}">
							</div>
						</div>

						<div class="form-group ">
							<label for="lastname" class="control-label col-lg-2">地址</label>
							<div class="col-lg-9">

								<input class=" form-control" type="text" name="area" value="{$res[0]['area']}" id="city" />

								<script type="text/javascript">
									$("#city").click(function (e) {
										SelCity(this,e);
									});
								</script>
							</div>
						</div>

						<div class="form-group ">
							<label for="username" class="control-label col-lg-2">出生日期</label>
							<div class="col-lg-9">
								<input id="dp1" class="form-control " type="text" value="{$res[0]['birthday']}" size="16" class="form-control" name="birthday">
							</div>
						</div>

						<div class="form-group ">
							<label for="password" class="control-label col-lg-2">个性签名</label>
							<div class="col-lg-9">
								<input class="form-control "  name="signature" type="text" value="{$res[0]['signature']}">
							</div>
						</div>
						<div class="form-group ">
							<label class="control-label col-lg-2">人脸识别</label>
							<div class="col-lg-9">
								<button type="button" class="btn btn-success disabled" id="trueFace" <if condition="$res[0]['feature'] eq ''">style="display:none;"</if>>已识别</button>
							<if condition="$res[0]['feature'] eq ''">
								<button type="button" class="btn btn-success" id="openFace">开启人脸识别</button>
							</if>
							</div>
							<hr>
							<label class="control-label col-lg-2"></label>
							<div class="col-lg-5 cam" id="" style="display:none;">
								<video id="video" width="320" height="240" autoplay></video>
							</div>
							<div class="col-lg-5" id="" style="display:none;">
								<canvas id="canvas" width="320" height="240"></canvas>
							</div>


							<script>
								var faceTime;
								$(document).ready(function () {
									$('#openFace').click(function(){
										$('.cam').slideDown();
						                var canvas = document.getElementById("canvas"),
						                // var canvas = document.createElement("canvas"),
						                    context = canvas.getContext("2d"),
						                    video = document.getElementById("video"),
						                    videoObj = {
						                        "video": true
						                    },
						                    errBack = function(error) {
						                        console.log("Video capture error: ", error.code);
						                    };
						                // Put video listeners into place
						                if (navigator.getUserMedia) { // Standard
						                    navigator.getUserMedia(videoObj, function(stream) {
						                        video.src = stream;
						                        video.play();
						                    }, errBack);
						                } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
						                    navigator.webkitGetUserMedia(videoObj, function(stream) {
						                        video.src = window.webkitURL.createObjectURL(stream);
						                        video.play();
						                    }, errBack);
						                } else if (navigator.mozGetUserMedia) { // Firefox-prefixed
						                    navigator.mozGetUserMedia(videoObj, function(stream) {
						                        video.src = window.URL.createObjectURL(stream);
						                        video.play();
						                    }, errBack);
						                }
										faceTime=setInterval(function(){
						                    context.drawImage(video, 0, 0, 320, 240);
						                    var imgData=canvas.toDataURL("image/jpeg");
						                    var image=imgData.substr(23);
						                    var feature=getfeature(image);
						                    // faceCheck(feature);
						                    faceRegister(image,feature,"{$Think.session.home.uid}");
										},3000);
									});
						        });

								//获取人脸特征
						        function getfeature(image){
						            var data={};
						            $.ajax({
						                url: 'http://api.facecore.cn/api/facedetect?appkey=2074f0022a8bc95f2c921d7eb5fdf925',
						                crossDomain: true,
						                cache: false,
						                type: 'post',
						                async: false,
						                dataType: 'json',
						                data: { faceimage: image },
						                success: function(res){
						                    if(res['facemodels'].length){
												clearInterval(faceTime);
												faceTime=null;
						                        data=res['facemodels'];
						                    }
						                },
						            });
						            return data;
						        }

						        //人脸注册（照片,特征码）
						        function faceRegister(image,feature,user_id) {
						            if (feature.length) {
						                var base64feature=feature[0].base64feature;
						                setTimeout(function(){
						                    $.ajax({
						                        url:'http://api.facecore.cn/api/personface?appkey=2074f0022a8bc95f2c921d7eb5fdf925',
						                        crossDomain: true,
						                        cache: false,
						                        type: 'post',
						                        async: false,
						                        data: {
						                            faceid:'user_'+user_id,
						                            Nick: 'user_'+user_id,
						                            Base64Feature: base64feature,
						                            Base64FaceImage: image
						                        },
						                        success: function (data) {
						                            console.log(data);
						                            if(data.result){
														$.post("{:U('Home/User/savefeature')}",{
															feature:base64feature
														},function(data){});
						                                alert('扫描成功！');
														$('#openFace').fadeOut();
														$('#video').slideUp();
														$('#trueFace').fadeIn();
						                            }else{
						                                alert('扫描失败，该ID人脸数据已存在！');
						                            }
						                        },
						                    });
						                },1000);
						            }else{
						                // alert("扫描失败！请端正您的姿势！");
						            }
						        }
							</script>
						</div>
						<div class="form-group">
							<div class="col-lg-offset-2 col-lg-10">
								<button class="btn btn-danger" type="submit">保存</button>
								<button class="btn btn-default" type="button">取消</button>
							</div>
						</div>
						<input type="hidden" name="user_id" value="{$Think.session.home.uid}">
					</form>
				</div>
			</div>
		</section>
	</aside>
</div>

	<!--custom switch-->
	<script src="__PUBLIC__/Theme/js/bootstrap-switch.js"></script>
	<!--custom tagsinput-->
	<script src="__PUBLIC__/Theme/js/jquery.tagsinput.js"></script>
	<!--custom checkbox & radio-->
	<script type="text/javascript" src="__PUBLIC__/Theme/js/ga.js"></script>

	<script type="text/javascript" src="__PUBLIC__/Theme/assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script type="text/javascript" src="__PUBLIC__/Theme/assets/bootstrap-daterangepicker/date.js"></script>
	<script type="text/javascript" src="__PUBLIC__/Theme/assets/bootstrap-daterangepicker/daterangepicker.js"></script>
	<script type="text/javascript" src="__PUBLIC__/Theme/assets/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
	<script type="text/javascript" src="__PUBLIC__/Theme/assets/ckeditor/ckeditor.js"></script>

	<!--script for this page-->
	<script src="__PUBLIC__/Theme/js/form-component.js"></script>
</block>
